<template>
    <div id="container2" style="margin-top: 10px;"></div>
</template>
<script>
import { Column } from '@antv/g2plot';

export default{
  props: {
    currentTermId: {
      type: String,
    }
  },
  data() {
    return {
      chart: null,
      loading: true,
    }
  },
  watch: {
    currentTermId: {
      handler(val) {
        this.getAttendTeacherStat(val);
      },
      immediate: true,
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    async initChart() {
      // 创建空图表容器
      this.chart = new Column(document.getElementById('container2'), {
          data: [],
          xField: 'month',
          yField: 'num',
          meta: {
            month: { alias: '月数' },
            num: { alias: '数量' }
          },
          label: {
            position: 'middle',
            style: { fill: '#fff' }
          },
          interactions: [{ type: 'element-active' }],
          loading: true // 初始显示加载状态
      });
      this.chart.render();
    },
    // 教师上课数量
    async getAttendTeacherStat(val) {
      const res = await this.$request.get(`api/report/teacher_attend_class_stat?term_id=${Number(val)}`);
      if (res.code == 1) {
        const transformedData = res.data || [];
        this.updateChart(transformedData);
      }
    },
    updateChart(data) {
      if (!this.chart) return;
      // 更新图表数据
      this.chart.changeData(data);
      // 关闭加载状态（如果有）
      this.chart.update({ loading: false });
    },
  },
}
</script>
<style lang="less" scoped>

</style>